<template>
  <div class="app-container">
    <el-col :span="14">
      <el-row>
        <el-button @click="addBtn" type="primary" round>新增按钮</el-button>
        <el-button type="danger" round @click="scBtn">批量删除</el-button>
      </el-row>
    </el-col>
    <el-col :span="10">
      <el-input placeholder="请输入内容" v-model="input">
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="serch"
        ></el-button>
      </el-input>
    </el-col>
    <el-table
      :data="list"
      @selection-change="selectChange"
      style="width: 100%"
      max-height="350"
    >
      <el-table-column
        fixed
        align="center"
        type="selection"
        width="100"
      ></el-table-column>
      <el-table-column
        label="#"
        type="index"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column prop="date" label="日期" align="center" width="200">
      </el-table-column>
      <el-table-column prop="title" label="标题" align="center" width="250">
      </el-table-column>
      <el-table-column prop="author" label="发布者" align="center" width="150">
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center" width="180">
      </el-table-column>
      <el-table-column
        prop="time"
        label="时间"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deletes(scope.row.id)">
            删除
          </el-button>
          <el-button type="text" size="small" @click="upadta(scope.row)">
            修改</el-button
          >
          <el-button type="text" size="small" @click="look(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-drawer
        class="drawer-el"
        size="80%"
        :title="title"
        :visible.sync="drawer"
      >
        <span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
              <el-input :disabled="see" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="作者">
              <el-input :disabled="true" v-model="form.author"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <el-select
                :disabled="see"
                v-model="form.cid"
                placeholder="请选择类别"
              >
                <el-option
                  v-for="(item, index) in classify"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-select
                :disabled="see"
                v-model="form.time"
                placeholder="请选择用时"
              >
                <el-option label="1分钟" value="1分钟"></el-option>
                <el-option label="2分钟" value="2分钟"></el-option>
                <el-option label="5分钟" value="5分钟"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容">
              <mavonEditor v-model="form.content" />
            </el-form-item>
            <el-form-item>
              <el-button :disabled="disabled" type="primary" @click="add"
                >确定</el-button
              >
              <el-button @click="drawer = false">取消</el-button>
            </el-form-item>
          </el-form>
        </span>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  data() {
    return {
      drawer: false,
      form: {
        author: "situ",
      },
      see: false,
      input: "",
      disabled: false,
      idArr: [],
      title: "新增",
    };
  },
  methods: {
    async serch() {
      await this.getList({ search: this.input });
    },
    scBtn() {
      if (!this.idArr.length) {
        this.$message({
          message: "请至少选择一条数据！！！",
          type: "warning",
        });
        return;
      }
      console.log(this.idArr);
      let arr = this.idArr.map((v) => {
        return v.id;
      });
      this.deletes(arr.join(","));
    },
    selectChange(val) {
      console.log(val);
      this.idArr = val;
    },
    addBtn() {
      this.drawer = true;
      this.form = { author: "situ" };
      this.disabled = false;
      this.title = "新增";
    },
    look(row) {
      // console.log(row)
      this.drawer = true;
      this.form = row;
      this.disabled = true;
      this.see = true;
      this.title = "查看";
    },
    async upadta(row) {
      this.form = row;
      this.drawer = true;
      this.title = "修改";
    },
    deletes(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.deleteMsbd(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.getList({ search: this.input });
    },
    async add() {
      if (this.form.id) {
        await this.updateMsbd({ form: this.form });
      } else {
        await this.postMsbd(this.form);
      }
      await this.getList({ search: this.input });
      this.drawer = false;
      // console.log(this.form)
    },
    ...mapActions("msbd", [
      "getList",
      "getClassify",
      "postMsbd",
      "deleteMsbd",
      "updateMsbd",
    ]),
    ...mapMutations("msbd", ["SET_CURR", "SET_SIZE"]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.SET_SIZE(val);
      this.getList({ search: this.input });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.SET_CURR(val);
      this.getList({ search: this.input });
    },
  },
  mounted() {
    this.getList({ search: this.input });
    this.getClassify();
  },
  computed: {
    ...mapState("msbd", [
      "list",
      "classify",
      "pageSize",
      "total",
      "currentPage",
    ]),
  },
  components: {
    mavonEditor,
  },
};
</script>

<style>
.el-drawer__header > :first-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    outline: none;
}

.drawer-el .el-drawer.rtl {
  overflow: hidden;
  overflow-y: auto;
}
</style>